<style lang="scss" scoped>
* {
  list-style: none;
}

li {
  text-align: left;
  display: flex;
  // margin-bottom: 20px;
  margin: 10px 10px;
  line-height: 30px;
  position: relative;
  padding: 0 10px;
}
span {
  color: #faaf00;
}
.content {
  width: 59%;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 10px;
  line-height: 28px;
}
.ping {
  text-align: left;
}
.star {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.shold {
  padding-right: 5px;
  margin-right: 48px;
  overflow: hidden;
}
.btn4 {
  width: 47px;
  height: 27px;
  line-height: 28px;
  text-align: center;
  box-sizing: border-box;
  background-color: #f03d37;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  top: 40%;
  right: 5%;
}
#btn {
  width: 47px;
  height: 27px;
  line-height: 28px;
  text-align: center;
  box-sizing: border-box;
  background-color: skyblue;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  top: 40%;
  right: 5%;
}
.yushou {
  color: white;
}
.headle {
  height: 44px;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  border-bottom: 2px solid gainsboro;
}
image[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
  background: #b9b9b9;
}
.movie {
  border: 1px solid skyblue;
  background-color: #3c9fe6;
  color: white;
  display: inline-block;
  line-height: 20px;
  font-size: 12px;
  width: 5vw;
  height: 20px;
  text-align: center;
}
.IMAX {
  border: 1px solid skyblue;
  background-color: white;
  display: inline-block;
  line-height: 20px;
  color: skyblue;
  font-size: 12px;
  width: 8vw;
  height: 20px;
  text-align: left;
}
.active {
  color: red;
}
.showInfo{
  font-size: 14px;
}
</style>


<template>
  <div class="home">
    <!-- 请求中 -->
    <div class="loading" v-if="!List.length">
      <mt-spinner type="fading-circle" color="#26a2ff"></mt-spinner>
    </div>
    <!-- 请求结束才显示 -->
    <ul v-if="List.length" v-infinite-scroll="loadMore" infinite-scroll-distance="50">
      <li v-for="(item,index) in List" :key="index" @click="Details(item.id)">
        <!-- 渲染图片 -->
        <img :src="[item.img.replace('w.h','100.150')]">
        <div class="content">
          <!-- 标题 -->
          <h4>
            {{item.nm}}
            <!-- 判断电影是否3D -->
            <span v-if="item.version !==''" class="movie">{{item.version.slice(1, 3).toUpperCase()}}</span>
            <span v-if="item.version !==''" class="IMAX">{{item.version.slice(4, 8).toUpperCase()}}</span>
          </h4>
          <!-- 判断上映时间是否大于当前时间 -->
          <div class="ping">
            <!-- 评分 -->
            <span v-if="item.sc !== 0 &&  item.rt <= time">观众评:{{item.sc}}</span>
            <span v-if="item.sc ==0" style="color: #777777">暂无评分</span>
          </div>

          <!-- 判断上映时间是否大于当前时间 -->
          <div class="ping">
            <span v-if="item.sc == 0">{{item.wish}}人想看</span>
          </div>

          <!-- 电影演员 -->
          <div class="star">主演:{{item.star}}</div>
          <div class="showInfo">{{item.showInfo}}</div>
          <button v-if="item.rt <= time" class="btn4">
            <span class="yushou">购票</span>
          </button>

          <!-- 判断按钮 -->
          <button id="btn" v-if="item.rt > time" class="btn4">
            <span class="yushou">预售</span>
          </button>
        </div>
      </li>
      <!-- loading 加载组件 -->
      <mt-spinner type="fading-circle" color="#26a2ff"></mt-spinner>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios";
import { constants } from "crypto";
export default {
  name: "home",
  data() {
    return {
      List: "",
      ver: "",
      time : '',
      movieIds: []
    };
  },
  methods: {
    // 触底刷新
    loadMore() {
      this.loading = true;
      let movieList_blueJ = "/moreComingList";
      let len = this.List.length;
      let tempStr = this.movieIds.slice(len, len + 10).join(",");
      this.axios
        .get(movieList_blueJ, {
          params: {
            token: "",
            movieIds: tempStr
          }
        })
        .then(res => {
          res.data.coming.forEach(item => {
            this.List.push(item);
          });
        })
        .catch(err => {});
    },
    Details(res) {
      //跳转详情
      this.$router.push({
        name: "Details",
        params: {
          id: res
        }
      });
    }
  },
  created() {
    let data = new Date();
    let Y = data.getFullYear();
    let M = data.getMonth()+1;
    let D = data.getDate();
    if(M<10){
      M = '0'+M
    }
    if(D<10){
      D = '0' +D
    }

    this.time = Y+ '-' + M +'-' + D;
    


    let movieList_blueJ = "/movieOnInfoList";
    //反向代理
    //前端--(请求)-->可以通信的服务器-(请求)->目标服务器
    //前端<--(请求)-->可以通信的服务器<-(请求)-目标服务器
    //开发模式:本地服务器
    //生产模式:线上部署的服务器:http://maoyan.bluej.cn
    this.axios
      .get(movieList_blueJ, {
        params: {
          token: ""
        }
      })
      .then(res => {
        this.List = res.data.movieList;
        this.movieIds = res.data.movieIds;
      })
      .catch(err => {
        console.warn(err);
      });
  }
  // components: {
  //   HelloWorld
  // }
};
</script>


